import React, { Component, useState } from 'react';
import { Input, Row, Col, Button } from 'antd';
import store from '../../store';
import { strChange, sliceChange, addSlicex, addSlicey } from '../../store/actionCreators';

const InputGroup = Input.Group;
class Str extends Component {
    constructor(props) {
        super(props)
        this.state = store.getState()
        // 订阅stroe,跟踪store中数据的变化
        store.subscribe(this.storeChange)
    }

    storeChange = () => {
        this.setState(store.getState())
    }
    handleChange = (e) => {
        const curren = e.target.value
        const action = strChange(curren)
        store.dispatch(action)
    }
    sliceMethod = (type, e) => {
        const curren = e.target.value
        if (type === 'x') {
            const action = addSlicex(curren)
            store.dispatch(action)

        } else {
            const action = addSlicey(curren)
            store.dispatch(action)
        }

    }
    handleSlice = (x) => {
        const action = sliceChange('确定')
        store.dispatch(action)
    }
    render() {
        const { str, ind, strslice } = this.state
        return (
            <div>
                <p style={{ color: 'red' }}>使用的字符串为：{str}</p>
                <ol>
                    <li>
                        <span>indexOf(x)</span>

                        <div style={{ margin: '5px 15px' }}>
                            <span>x:</span> <Input style={{ width: '300px', marginLeft: '10px' }} onChange={e => this.handleChange(e)} />
                            <p>返回的值：{ind}</p>
                            <p style={{ color: 'red' }}>indexOf()：从前往后查找，返回匹配到的第一个位置的索引，lastIndexOf(),从后往前查找，两者没有找到都返回-1</p>
                            <p style={{ color: 'blue' }}>indexOf(x,y)和lastIndexOf(x,y)中的y表示查找其实位置</p>
                        </div>
                    </li>
                    <li>
                        <span>slice(x,y)</span>

                        <div style={{ margin: '5px 15px' }}>
                            <InputGroup >
                                <Row span={33} style={{ margin: '10px 0px' }}>
                                    <Col span={1}> x:</Col>
                                    <Col span={8}>
                                        <Input type='number' style={{ marginLeft: '10px' }} onChange={e => this.sliceMethod('x', e)} />
                                    </Col>
                                </Row>
                                <Row span={33}>
                                    <Col span={1}> y:</Col>
                                    <Col span={8}>
                                        <Input type='number' style={{ marginLeft: '10px' }} onChange={e => this.sliceMethod('y', e)} />
                                    </Col>
                                    <Col offset={3} span={3}>
                                        <Button type='primary' onClick={this.handleSlice}>确定</Button>
                                    </Col>
                                </Row>
                            </InputGroup>

                            <p>返回的值：{strslice}</p>
                        </div>
                    </li>
                </ol>
            </div >);
    }
}


export default Str;